<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<link rel="stylesheet" href="${ctxStatic}/css/DateTimePicker.css">
<link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
<script src="${ctxStatic}/DateTimePicker/DateTimePicker.js"></script>
</head>
<script>

    /*初始方法*/
    $(function() {

        // 加结果集式样
        addTitleCss();
        var params = $("#inputForm").serialize();
    })

    /*加结果集式样*/
    function addTitleCss() {
        // 结果集个数
        var resultNumber = $("input[name='firstName']").length;

        // 如果结果集个数大于零
        if (resultNumber > 0) {
            var theadW = $('.tabScroll thead').width()
            var theadTh = $('.tabScroll thead tr th').length
            $('.tabScroll thead tr th').width(theadW / theadTh)
            $('.tabScroll tbody tr:first-child td')
                    .each(
                            function() {
                                var indexNum = $(this).index()
                                var tdWidth = $(
                                        '.tabScroll tbody tr:first-child td')
                                        .eq(indexNum).css('width')
                                $('.tabScroll thead tr th').eq(indexNum).width(
                                        tdWidth);
                            })
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
        }
    }

    /*搜索*/
    function searchItem() {

        var params = $("#searchForm").serialize();

        $.post("${ctx}/order/createOrder/findTailorList", params,
                function(result) {
                    // 显示结果集
                    var h = $(callBackHtml(result)).find("#infoList").html();
                    $('#infoList').html(h);

                    var theadW = $('.tabScroll thead').width()
                    var theadTh = $('.tabScroll thead tr th').length
                    $('.tabScroll thead tr th').width(theadW / theadTh)
                    $('.tabScroll tbody tr:first-child td').each(
                            function() {
                                var indexNum = $(this).index()
                                var tdWidth = $(
                                        '.tabScroll tbody tr:first-child td')
                                        .eq(indexNum).css('width')
                                $('.tabScroll thead tr th').eq(indexNum).width(
                                        tdWidth);
                            })

                    $('tbody tr').on('click', function() {

                        $(this).addClass('active')
                        $(this).siblings().removeClass('active')
                    })
                    // 加结果集式样
                    addTitleCss();
                }, 'html');

    }
    
    /*选择*/
    function chooseItem() {

        var items = $(".active");
        if (items.length == 0) {
            // 请选择项目！
            layer.msg('<spring:message code="order_please_choose_item"/>', {time:1000}); 
            return;
        }
        
        // 向父页面加载值
        window.parent.frames[0].chooseTailor(items);
        // 关闭当前页面
        closeWin();

    }

</script>
<!--头部-->
<div class="myshop clearfix">
    <!-- 选择裁缝 -->
    <p class="myshoptop fl"><spring:message code="order_choose_dressmaker"/></p>
    <div class="fr">
        <div class="topBtnClose" onclick="closeWin()">
            <img src="${ctxStatic}/images/btn-close.png">
        </div>
    </div>
</div>

<div class="middle myshop_middleSm">
    <div class="clearfix">
        <form id="searchForm">
            <!-- 隐藏变量 -->
            <div class="searchLeft clearfix">
                <div class="searchSm clearfix">
                    <!-- 裁缝姓名 -->
                    <p class="searchTxt"><spring:message code="order_dressmaker_name"/></p>
                    <div class="searchInp">
                        <input name="firstName" value="${order.firstName}">
                    </div>
                </div>
            </div>
            <div class="searchRight">
                <!-- 选择 -->
                <button type="button" class="btn-cj" onclick="chooseItem()"><spring:message code="order_choose"/></button>
                <!-- 重置 -->
                <button type="reset" class="btn-js" ><spring:message code="common_reset"/></button>
                <!-- 检索 -->
                <button type="button" class="btn-js" onclick = "searchItem()"><spring:message code="commom_check"/></button>
            </div>
            <div id="dtBox1"></div>
        </form>
    </div>
    <div class="clearfix">
        <!-- 项目列表 -->
        <p class="data_id"><spring:message code="order_item_list"/></p>
    </div>
    <div class="tableBox tableList">
        <div class="tableSm orderSelectBox">
            <div class="tabScroll" style="height:400px;" id="infoList">
                <table cellpadding="0">
                    <thead>
                        <tr>
                            <!-- No. -->
                            <th><spring:message code="order_No"/></th>
                            <!-- 登录ID -->
                            <th><spring:message code="user_loginId"/></th>
                            <!-- 姓氏 -->
                            <th><spring:message code="user_surname"/></th>
                            <!-- 名字 -->
                            <th><spring:message code="user_showName"/></th>
                            <!-- 性别 -->
                            <th><spring:message code="user_sex"/></th>
                            <!-- 人员角色 -->
                            <th><spring:message code="user_role"/></th>
                            <!-- 状态 -->
                            <th><spring:message code="user_state"/></th>
                            <!-- 最后登录日 -->
                            <th><spring:message code="user_lastGoDate"/></th>
                            <!-- 创建人 -->
                            <th><spring:message code="user_creatUser"/></th>
                            <!-- 创建日期 -->
                            <th><spring:message code="user_creatDate"/></th>
                        </tr>
                    </thead>
                     <c:if test="${not empty tailorList}" >
                        <tbody>
                            <c:forEach items="${tailorList}" var="user" varStatus="status">
                                <tr>
                                    <td>
                                        <p>${status.index+1}</p>
                                    </td>
                                    <td>
                                        <%-- <shiro:hasPermission name="sys:user:view">
                                            <p class="show" onclick="popup('800px','470px','${ctx}/sys/user/show?id=${user.id}')">${user.loginName}</p>
                                        </shiro:hasPermission> --%>
                                            <p>${user.loginName}</p>
                                    </td>
                                    <td>
                                        <p>${user.firstName}<input name="id" type="hidden" value="${user.id}"/></p>
                                    </td>
                                    <td>
                                        <p>${user.lastName}<input name="firstName" type="hidden" value="${user.firstName}${user.lastName}"></p>
                                    </td>
                                     <td>
                                        <p>
                                            ${fns:getDictName(user.sex)}
                                        </p>
                                    </td>
                                    <td>
                                        <p>${user.role.roleName}</p>
                                    </td>
                                    <td>
                                        <p>
                                        <c:choose>
                                           <c:when test="${user.deleteFlag eq 0}"><spring:message code="common_normal"/></c:when>
                                           <c:when test="${user.deleteFlag eq 1}"><spring:message code="common_disable"/></c:when>
                                        </c:choose>
                                        </p>
                                    </td>
                                    <td>
                                        <p><fmt:formatDate value="${user.lastDate}" pattern="yyyy-MM-dd HH:mm" /></p>
                                    </td>
                                    <td>
                                        <p>${user.userCreatUser}</p>
                                    </td>
                                    <td>
                                         <p><fmt:formatDate value="${user.createDate}" pattern="yyyy-MM-dd HH:mm"/></p>
                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </c:if>
                    <c:if test="${empty tailorList}" >
                    <div class="tableNone">
                        <img src="${ctxStatic}/images/icon-03.png" height="20"> <spring:message code="There_is_no_data"/>
                    </div>
                    </c:if>
                </table>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/layer.js"></script>
<script src="js/layerStyle.js"></script>

<script>
// 由于样式问题，javascript放在上面写，css效果显示不出
    var windowH = window.innerHeight
            ||document.documentElement.clientHeight
            ||document.body.clientHeight
    $('.middle').css('height',windowH - 40);

    $('tbody tr').on('click',function(){
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
    })

    window.onload = function(){
        var theadW = $('.tabScroll thead').width()
        var theadTh = $('.tabScroll thead tr th').length
        $('.tabScroll thead tr th').width(theadW/theadTh)
        $('.tabScroll tbody tr:first-child td').each(function(){
            var indexNum = $(this).index()
            var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width')
            $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
        })

    }
</script>
</body>
</html>